<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div id="app">
			<!--两个标签只有条件成立的会显示，不成立的标签被移除，切换标签会再次加载显示，浪费点时间和性能-->
			<p v-if="ok">成功</p>
			<p v-else>失败</p>
			<!--两个标签都会显示，条件不成立的标签通过style="display: none;"隐藏起来，切换标签只是改变style的值，速度较快-->
			<p v-show="ok">表白成功</p>
			<p v-show="!ok">表白失败</p>
			<!--直接取反，再赋值给对象-->
			<button @click="ok = !ok">更新</button>
			
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el: "#app",
			data: {
				ok: false
			}
		})
	</script>

</html>
